{%extends "base.html"%}
{%block body%}

<script type="text/javascript" src="/static/tmapsroutemaker.js"></script>
<script type="text/javascript" src="/static/btnStack.js"></script>
<script type="text/javascript" src="/static/json2.js"></script>
<script language="JavaScript1.2"> 

var globalNode = 0;
var myObj = {{ route.way }}  ;
var myGPX = {{ gpxPoints }};
var routeZoom = {{ route.zoom }};
var saved = true;

function pageLoad() {
      // note from python:  newStr = route.way and the context { 'jsonWay':newStr}
      // and for below: json_obj = simplejson.loads(newStr) and { 'ways':json_obj[way] }
	
	llon = {{ route.longitude }};
	llat = {{ route.latitude }};
	mapLoader(llat, llon, routeZoom);
	saved = true;
        globalNode = 0;
	if ( myObj.way.length < 1 ) {
		document.getElementById('wayNodes').style.visibility = "hidden"; 
	} else {
        	document.getElementById("0_nodepad").style.backgroundColor="blue";
		var x=document.getElementById(globalNode + "_nodeform");
		
		for (var i=0; i < x.length;i++)
  		{
  		 	x.elements[i].style.border="solid";
  		}
	}
	
	showRoute();
	placeMarker(llat, llon);
	btns=new btnStack();
	readyEditorButtons();
	document.getElementById('helpNode').innerHTML = "<br>";
	
	
}

</script>

</head>

<body onload="pageLoad()"  link="white" vlink="white" alink="red"  display: inline; >

<div id="appFrame">

{% include "title.html" %}
<div id="modeID" class="subTitle">Editing Options: </div>
<div id="controlBox">
	
	<div id='btnHolder'> </div>

	<div id="helpNode" > <blink> ...  loading ... </blink> </div>
	<div id="formHolder">

		<form action="updateJSONway/" method="post" id="frmRouteData" name="frmRouteData" >	
		<input type = "hidden" id="routeKey" name="routeKey2" value="{{route.key }}"/>
		<textarea  id="JSONbox" name="JSONbox" value = ""  rows=1 cols=60 style="visibility:hidden" > </textarea>
		</form>
		<form action="addGPX/" method="post" id="frmGPXData" name="frmGPXData" >	
		<input type = "hidden" id="routeKey" name="routeKey2" value="{{route.key }}"/>
		<textarea  id="GPXbox" name="GPXbox"  rows=1 cols=60  style="visibility:hidden" > {{route.gpx}} </textarea>
		</form>
	</div>	
	<div id="editBox"> </div> 

</div>

<div id="modeID2" class="subTitle"> Picture List: </div>
<div id = "scrollingEditor"> 
<div id="leftImages">
	

	<div id="detailHeader" class="headData">
		<h2>Editing: {{route.routeName }} </h2> 
	
		<p style="color:white"> Click on a picture to edit it</p>
	
		<br>
	</div>


	<div id="routeDiv" class="headData">
	
		<img src="{{ route.img }}" alt="{{route.routeName}}"  />
		<ul>
		 <li> <b> State: &nbsp; </b>      {{route.state }} <br>
		 <li> <b>Latitude:</b>  &nbsp;  	{{ route.latitude }} <br>
		 <li> <b>Longitude: </b>  &nbsp; 	{{ route.longitude }} <br>
		 <li> <b>Location: </b>  &nbsp; 	{{ route.locationName }} <br>
		 <li> <b> Description: &nbsp; </b>      {{route.intro }} <br>
		 <li> <b> Type of Route: &nbsp; </b>      {{route.typeTrail }} <br>
		 <li> <b> Organization: &nbsp; </b>      {{route.organization }} <br>
		 <li> <a href="edit"  > <b> Edit </b> </a> above data
        
		</ul>
		<hr>
	</div>

<div id = "wayNodes">

{%for way in ways %}  



<div id = "{{ forloop.counter0 }}_nodepad" onclick="editWay( {{ forloop.counter0 }}); return false;" onmouseover="pointWay( {{ forloop.counter0 }} ); return false;" onmouseout="whiteWay( {{ forloop.counter0 }} ); return false;" class="imgdata">

	<form action="#" id="{{ forloop.counter0 }}_nodeform" name="{{ forloop.counter0 }}_nodeform">
		<p class="banner" >
		<button type="button" style="float:right" class="nav" onclick="deleteWay({{ forloop.counter0  }})" > Delete </button>
 		POSITION: <input class="invisiForm" type="input" onchange="wayReorder( {{ forloop.counter0 }} , this.value)" id="position" name="position" size=2 value="{{ forloop.counter0 }} "/> (Edit number to change position)
   		</p>
<input type="checkbox" id="coverCbx" value="use for cover" onclick="makeCover({{ forloop.counter0 }})">Use as cover picture and position<br>
	  	<ul>
		<li>
		  	LATITUDE: <em>*</em> &nbsp;  &nbsp; &nbsp; 
      		 	<input class="invisiForm" type = "input" onchange="wayUpdate( {{ forloop.counter0 }}, this.name, this.value )" name="latitude" value="{{ way.latitude }} "/> 
   		  <li>
		 	 LONGITUDE: <em>*</em>  &nbsp;  
		 	<input class="invisiForm"  type = "input" onchange="wayUpdate( {{ forloop.counter0 }}, this.name, this.value )" name="longitude" value=" {{ way.longitude }}"/> 
		 <li>
		 	 HEADING:  &nbsp;  &nbsp;  &nbsp;  &nbsp;  
		 	<input class="invisiForm"  type = "input" onchange="wayUpdate( {{ forloop.counter0 }}, this.name, this.value )" name="heading" value=" {{ way.heading }}"/>
		<li>	ZOOM:  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  
			<input class="invisiForm" type="input" onchange="wayUpdate( {{ forloop.counter0 }}, this.name, this.value )" name="zoom" value="{{ way.zoom }}"/>
		 <li>  
		 	 DESCRIPTION: &nbsp;   
		 	<textarea class="invisiForm"  type = "input" onchange="wayUpdate( {{ forloop.counter0 }}, this.name, this.value )" name="description" />{{ way.description }}</textarea>
			IMAGE:  &nbsp;  &nbsp;  
		 	<input class="invisiForm"  type = "input" onchange="wayUpdate( {{ forloop.counter0 }}, this.name, this.value )" name="image" value=" {{ way.img }}"/>
		 <li>
	  	</ul>
	
  	</form>
        <img name="{{ forloop.counter0 }}_nodeImg"   id="{{ forloop.counter0 }}_nodeImg"  src="{{ way.img }}"  alt="{{way.heading}}"  />
</div> 
	
<button type="button" class="nav" onclick="addNewWay({{ forloop.counter0 }}, '')" id="{{ forloop.counter0 }}_btnadd" name="{{ forloop.counter0 }}_btnadd">Insert New Node  </button>

{%endfor%}
</div>

</div> 

{% include "builderMap.html" %}

</div>
</div>
</body>

{%endblock%}

